<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="position: relative">
      <el-button style="margin-left: 650px;margin-top: 10px;border: none" icon="el-icon-user"></el-button>
      <el-button style="margin-top: 10px;border: none" icon="el-icon-search"></el-button>
      <el-button style="margin-top: 10px;border: none" icon="el-icon-shopping-cart-2"></el-button>
      <el-menu-item index="1">航拍无人机</el-menu-item>
      <el-submenu index="2">
        <template slot="title">手持拍摄设备</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" >商用产品及方案</el-menu-item>
      <el-menu-item index="4">增值服务</el-menu-item>
      <el-menu-item index="4">创意周边</el-menu-item>
    </el-menu>
    <div class="line"></div>
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
    </el-menu>
    <h1>
      线下试飞预约
    </h1>
    <div style="width: 45%;margin-left: 400px;margin-bottom: 50px;margin-top: 30px">
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即预约</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    </div>

    <div style="height: 350px;background-color: #3b3e40">
    <div id="foot_2">
      <div class="f_1">
        <a href=""><p>热门产品分类</p></a>
        <a href=""><p>航拍无人机</p></a>
        <a href=""><p>手持拍摄设备</p></a>
        <a href=""><p>商用产品及方案</p></a>
        <a href=""><p>增值服务</p></a>
      </div>
      <div class="f_2">
        <a href=""><p>帮助与支持</p></a>
        <a href=""><p>支付方式</p></a>
        <a href=""><p>订单帮助</p></a>
        <a href=""><p>发货和物流</p></a>
        <a href=""><p>退换货条款</p></a>
        <a href=""><p>技术支持</p></a>
        <a href=""><p>维修中心</p></a>
        <a href=""><p>售后服务政策</p></a>

      </div>
      <div class="f_3">
        <a href=""><p>商品项目</p></a>
        <a href=""><p>Q币返利计划</p></a>
        <a href=""><p>以旧换新</p></a>
        <a href=""><p>商城APP</p></a>
      </div>
      <div class="f_4">
        <a href=""><p>探索精彩</p></a>
        <a href=""><p>天空之城</p></a>
        <a href=""><p>社区</p></a>
        <a href=""><p>购机指南</p></a>
        <a href=""><p>安全飞行指引</p></a>
        <a href=""><p>环球飞行指南</p></a>
      </div>
    </div>
    <el-divider></el-divider>
    <p style="text-align: center">Copyright © 2022 DJI 大疆创新 版权所有隐私权政策使用条款粤ICP备12022215号-11营业执照网站地图</p>
  </div>
  </div>

</template>

<style>
h1>span{
  font-size: 12px;
  color: silver;
  margin: 0px 40px;
}
  a{
    text-decoration: none;
  }
  h1{
   text-decoration: none;color: deepskyblue;
    text-align: center;
  }
p{
  font-size: 12px;
  color:white;
}
#foot_2{
  width: 1200px;height: 280px;margin: 0 auto;
}
.f_1{
  width: 292px;height: 200px;float: left;
}.f_2{
   width: 292px;height: 200px;float: left;margin: 0px 10px;
 }.f_3{
    width: 292px;height: 200px;float: left;
  }.f_4{
     width: 292px;height: 200px;float: right;
   }
</style>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          type: [],
          resource: '',
          desc: ''
        }
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>